<template>
	<view class="con">
		<view class="c-avatar">
			<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :src="avatarUrl" class="avatar" mode=""></image>
			</button>
		</view>

		<view class="c-name">

			<view class="c-name-title">
				昵称:
			</view>
			<input type="nickname" placeholder="请输入昵称" class="c-input" @input="onKeyInput" />
		</view>

		<button class="submit" @tap="goBack">确定</button>
		<view class="c-authorized">
			<!-- 判断协议 -->
			<button class="authorized-btn" v-if="!agree_flag" @click="checkAgree">确定</button>
			<!-- 手机号获取 -->
			<button class="authorized-btn" v-else open-type="getPhoneNumber"
				@getphonenumber="getphoneNumber">确定</button>
			<!-- 协议勾选 -->
			<view class="authorized-protocol">
				<view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag">
					<image src="@/static/images/login/unagree_protocol.png">
					</image>
				</view>
				<view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag">
					<image src="@/static/images/login/agree_protocol.png">
					</image>
				</view>
				<view class="agree_text">
					登录代表您已同意
					<span>《用户服务协议》《隐私权政策》</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const inputValue = ref("")
	const isLogin = ref(false)
	const avatarUrl = ref(
		"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
	)

	function onChooseAvatar(e) {
		console.log(e)
		avatarUrl.value = e.detail.avatarUrl
		console.log(inputValue.value)

	}

	function onKeyInput(e) {
		// 注意，这里可能会出现无法获取微信快捷昵称的值，这是开发者工具的问题
		// 真机和预览是没问题的。
		console.log("111", e.target.value)
		inputValue.value = e.target.value
	}

	function goBack() {
		if (inputValue.value && avatarUrl.value) {
			isLogin.value = true;
			console.log("123")
		}
		const ret = {
			isLogin: isLogin.value,
			avatarUrl: avatarUrl.value,
			name: inputValue.value
		}
		uni.$emit('ret', ret);
		uni.navigateBack();
	}
	
	import http from '../../utils/http';
	const session_key = ref("")
	const phoneNumber = ref(null)
	const agree_flag = ref(false)
	// 勾选协议的点击时间，改变true和false
	function changeAgreeFlag() {
		agree_flag.value = !agree_flag.value
	}
	// 判断协议是否勾选
	function checkAgree() {
		if (!agree_flag.value) {
			uni.showToast({
				icon: 'error',
				title: "请阅读协议",
			})
		}
	}
	// 快捷登录手机号接口，调用后端接口获取手机号
	function getphoneNumber(e) {
		console.log("111", e)
		console.log("111", e.detail.code)
		if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
			console.log("用户点击了取消");
		} else {
			console.log("用户点击了允许");
			console.log("encryptedData", e.detail.encryptedData)
			console.log("iv", e.detail.iv)
			http.request({
				url: '/api/user/get_phone',
				method: 'POST',
				data: {
					code: e.detail.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					session_key: session_key.value
				}
			}).then((responseData) => {
				console.log("手机号为", responseData.data)
				phoneNumber.value = responseData.data
				const ret = {
					phone: phoneNumber.value,
				}
				uni.$emit('ret', ret);
				uni.navigateBack();
			}).catch((err) => {
				// 在这里处理请求失败的情况
				console.log("err", err)
			});
		}
	
	}
</script>

<style lang="scss" scoped>
	@import "./userLogin.scss";
</style>